<template>
  <div :class="$style.greenmodal">
    <div :class="$style.resultBox" v-if="authResult==1">
      <img :class="$style.resultIcon" src="/tongguo.png" alt="" />
      <div :class="$style.resultText">实名认证已通过</div>
    </div>
    <lay-form ref="formRef" :model="formData" :rules="formRules">
      <lay-form-item label="真实姓名" label-position="top" prop="realName" required>
        <lay-input v-model="formData.realName" placeholder="真实姓名" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item label="证件号" label-position="top" prop="idCard" required>
        <lay-input v-model="formData.idCard" placeholder="证件号" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item>
        <lay-button type="primary" @click="submitForm" :disabled="authResult == 1">保存</lay-button>
      </lay-form-item>
    </lay-form>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "GreenModal",
  data() {
    return {
      formData: {
        realName: '',
        idCard: '',
      },
      formRules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        idCard: [
          { required: true, message: '请输入证件号', trigger: 'blur' },
        ],
      },
      authResult: 0,
    };
  },
  methods: {
    submitForm() {
      let that = this;
      that.$refs.formRef.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData.nickName,
          //   avatar: that.formData.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('保存失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
  },
});
</script>
<style module>
.greenmodal {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
}

.resultBox {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: #E7FAF0;
  box-sizing: border-box;
  border: 1px solid #13CE66;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.resultIcon {
  width: 20px;
  height: 20px;
}

.resultText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 250;
  color: #13CE66;
  margin-left: 5px;
}
</style>
<style scoped>
.layui-btn {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>